<template>
		<view  :style="getStyle" class="px-2 py-1 border d-inline-block m-1">
			{{resData.name}}
		</view>
 </template>

<script>
	export default{
		props:{
			resData:Object,
			color:{
				type:Boolean,
				default:true
				
			}
		},
		computed:{
			getStyle(){
				if(!this.color){
					return `border:0;background:#f5f5f5;`
				}
				let color={
					borderColor:['#eea6aa',"#dd6a4b","#98d5d8","#bccd99"],
					background:["#f8eae9","#ffbec6","#e8f6f6","#e4f5d2"]
				}
				let index=Math.floor(Math.random()*color.borderColor.length) 
				let borderColor=color.borderColor[index]
				let background=color.background[index]
				return `border-color:${borderColor};background:${background};`
			}
		}
	}
	
</script>

<style>
</style>
